import { Typography } from '@mui/material';

import { CSVError } from '../../libs/csv-validation';

interface CSVErrorsProps {
    errors: Array<CSVError>;
}

const CSVErrors = (props: CSVErrorsProps) => {
    return (
        <>
            {props.errors?.map((error) => {
                const messages = error.errors.join(', ');

                return (
                    <Typography key={error.row}>
                        Row {error.row + 1} - {messages}
                    </Typography>
                );
            })}
        </>
    );
};

export default CSVErrors;
